<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>{{ title }}</h1>
    <!--组件的使用就是HTML标签的调用写法-->
    <mycomponent1></mycomponent1>
    <mycomponent2></mycomponent2>
</div>

</body>
<script src="./lib/vue.js"></script>
<script type="text/javascript">
    /*组件化的开发思想：
    * 1. 定义组件
    *   1.1 全局组件
    *
    *   1.2 局部组件
    * 2. 使用组件
    *   组件在调用的时候，会使用 template 里面的字符串替换到调用处。
    * */

    /*全局组件 必须写在实例化代码之前*/
    /*
    * 开发者编写的组件，其实就是相当于扩充了 html 的标签。就相当于用户自己开发了一个新的 html 标签。
    *
    * 参数1：组件的名称，我们也可以叫做标签名称
    * 参数2：组件对象，必须存在一个 template属性，该属性就是我们组件结构
    *   组件的构成：
    *       1. 结构 2. 样式 3.行为 4. 数据 5. 生命周期函数
    *
    * */
    Vue.component('mycomponent1', {
        template: '<h1>我是全局组件！</h1>'
    });

    Vue.component('mycomponent2', {
        template: '<h1>我是全局组件2！</h1>'
    });

    var vm = new Vue({
        el: '#app',
        data: {
            title: 'hi vuejs!',
        }
    });
</script>

</html>
